<template>
    <div id="ChatAiView">
        <a-card title="Ai对话框" style="width: 100%; height: 100%;" :loading="loading" :bordered="false" :hoverable="true">
            <div class="chatView">
                <a-comment v-if="userChat">
                    <template #author><a>我是用户</a></template>
                    <template #avatar>
                        <a-avatar src="http://localhost:3000/uploads\\1742286700027-touxiang.jpg" alt="我是用户" />
                    </template>
                    <template #content>
                        <p>{{ userChat }}</p>
                    </template>
                </a-comment>
                <a-comment>
                    <template #author><a>我是ai</a></template>
                    <template #avatar>
                        <a-avatar src="http://localhost:3000/uploads\\1743174071300-ai.jpg" alt="我是ai" />
                    </template>
                    <template #content>
                        <p>{{ chatContent }}</p>
                    </template>
                </a-comment>
            </div>
            <div class="input">
                <a-input-group compact>
                    <a-input v-model:value="inputValue" style="width: calc(100% - 70px)" @change="inputchange" />
                    <a-button type="primary" @click="handleok" :disabled="hasinputValue">确认</a-button>
                </a-input-group>
            </div>
        </a-card>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { chatai } from '@/api/apitest';
const inputValue = ref('');
const hasinputValue = ref(true);
console.log(hasinputValue);

const loading = ref(false);
let chatContent = ref('')
let userChat = ref('')
const handleok = async () => {
    // console.log(inputValue.value);
    loading.value = !loading.value;
    const result = await chatai(inputValue.value)
    console.log(result.Choices[0].Message.Content);
    if (result.Choices[0].Message.Content) {
        loading.value = !loading.value;
        chatContent.value = result.Choices[0].Message.Content
        userChat.value = inputValue.value
        //将对话记录存入本地存储
        localStorage.setItem('userMessage', JSON.stringify(inputValue.value))
        localStorage.setItem('aiMessage', JSON.stringify(result.Choices[0].Message.Content))
        inputValue.value = ''
    }
}
//对话框输入值为空时，确认按钮不可用
const inputchange = () => {
    if (inputValue.value) {
        hasinputValue.value = false
    } else {
        hasinputValue.value = true
    }
}
//对话历史记录
const getMessage = () => {
    const userMessage = JSON.parse(localStorage.getItem('userMessage'))
    const aiMessage = JSON.parse(localStorage.getItem('aiMessage'))
    if (userMessage && aiMessage) {
        userChat.value = userMessage
        chatContent.value = aiMessage
    } else {
        chatContent.value = 'ai智能助手，欢迎使用！请问有什么可以帮助你的吗？'
    }
}
onMounted(() => {
    getMessage()
})
</script>
<style lang="scss" scoped>
#ChatAiView {
    width: 100%;
    height: 100%;

    .chatView {
        width: 100%;
        height: 68vh;
        background-color: #f0f2f5;
        border-radius: 8px;
        padding: 5px;
        overflow-y: auto;
    }

    .input {
        width: 100%;
        height: 5vh;

        border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
</style>
